import pos, { PosAppFeeOutput, PosGetIn, PosCustomer } from 'api/pos';
import { RadiusButton, Toast } from 'components';
import React, { useEffect, useState, useRef } from 'react';
import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { NavigationStackScreenComponent } from 'react-navigation-stack';
import { goBack } from 'services/navigation';
import { commonStyle, translateSize, definedColors, themeColors } from 'styles';

import assets from './assets';
import { changeStyle } from './styles';
import Loading from 'components/loading';
import { appDate } from 'utils/dateUtils';
import { operate } from 'services/authorization';

const ChangeFeeScreen: NavigationStackScreenComponent<{ posAppGetin: PosGetIn }> = props => {
	const [feeList, setFeeList] = useState<PosAppFeeOutput[]>([])
	const [currFeeList, setCurrFeeList] = useState<PosAppFeeOutput[]>([])
	const [posAppGetin, setPosAppGetin] = useState<PosGetIn>({})
	// const currFeeList = useRef<PosAppFeeOutput[]>([])
	useEffect(() => {
		load()
	}, [])
	const load = () => {
		let posAppGetinData = props.navigation.getParam('posAppGetin')
		if (posAppGetinData) {
			setPosAppGetin(posAppGetinData)
			pos.posApp.getFeeByScene(posAppGetinData).then(res => {
				res && setFeeList(res)
				setCurrFeeList([])
			})
		}
	}
	const clickFee = (item: PosAppFeeOutput) => {
		if (item.electronicBillUrl === '') {
			let data = currFeeList
			if (data.find(d => d.id === item.id)) {
				data = data.filter(d => d.id !== item.id)
			} else {
				data.push(item)
			}
			setCurrFeeList([...data])
		} else {
			showBill(item.electronicBillUrl, item.voucherId)
		}

	}
	let lock = false
	const generateBill = (templateId: any, remarks: string) => {
		if (lock) return
		lock = false
		Loading.show()
		pos.posApp.generateBill({ getInFeeIdList: currFeeList.map(d => { return d.id }), templateId, remarks, projectId: posAppGetin.projectId, preview: 1 }).then(
			res => {
				if (res.result) {
					Toast.show('预览成功')
					Loading.hide()
					showBill(res.data.electronicBillUrl, res.data.id, templateId, currFeeList.map(d => { return d.id }), remarks)
				}
				else {
					Toast.show('预览失败!' + res.msg)
					Loading.hide()
				}
			}
		).catch(err => {
			Loading.hide()
		}).finally(() => {
			load()
			lock = true
		})
	}
	const selectTemplate = () => {
		if (currFeeList.length < 1) {
			Toast.show('请选择款项！')
			return
		}
		props.navigation.navigate('ChangeTemplate', {
			projectId: posAppGetin.projectId,
			generateBill
		})
	}
	const showBill = (electronicBillUrl: string, voucherId?: number, templateId?: number, getInFeeIdList?: number[], remarks: string) => {

		if (electronicBillUrl !== '') {
			props.navigation.navigate('ShowBill', {
				billUrl: electronicBillUrl,
				voucherId,
				templateId,
				getInFeeIdList,
				remarks,
				load
			})
		}
	}
	const renderItem = (item: PosAppFeeOutput) => {
		return (

			<TouchableOpacity style={changeStyle.itemContainer} key={item.id} onPress={() => {
				clickFee(item)
			}}>
				<View style={{ ...changeStyle.rowContainer }}>
					{
						item.electronicBillUrl === '' ?
							<Image
								resizeMode="cover"
								style={changeStyle.checkImage}
								source={currFeeList.find(d => d.id === item.id) ? assets.images.icon_check : assets.images.icon_uncheck}
							/>
							: null
					}

					<View style={{ ...changeStyle.nameContainer }}>
						<Text style={changeStyle.name}>{item.fundName}</Text>
						<Text style={changeStyle.name}>{`¥${item.amount}元`}</Text></View>


				</View>
				<View style={{ ...changeStyle.nameContainer, ...changeStyle.rowMargin, width: '100%' }}>
					<RadiusButton style={{ ...commonStyle.ringButton, width: translateSize(250), backgroundColor: item.electronicBillUrl !== '' ? definedColors.white : themeColors.primary }} onPress={() => { showBill(item.electronicBillUrl, item.voucherId) }}>
						{item.electronicBillUrl !== '' ? <Text>查看电子收据</Text> : <Text>未生成电子收据</Text>}
					</RadiusButton>
					<Text style={changeStyle.remark}>{item.createdOn}</Text></View>

			</TouchableOpacity>
		)
	}

	return (
		<View style={[commonStyle.containerColumn, changeStyle.container]}>
			<ScrollView keyboardShouldPersistTaps="always">
				<View style={[commonStyle.containerColumn, changeStyle.listContainer]}>
					{feeList.map(renderItem)}
				</View>
			</ScrollView>
			<RadiusButton style={changeStyle.comfirmBtn} onPress={() => {
				selectTemplate()
			}}>
				<Text style={changeStyle.btnText}>生成收据</Text>
			</RadiusButton>
		</View>
	)
}

ChangeFeeScreen.navigationOptions = props => {
	return {
		title: '款项选择',
	}
}

export default ChangeFeeScreen
